<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="file" id="file">
    <button onclick="downloadFile()">上传图片</button>
</body>
</html>
<script>
    var file = document.getElementById("file");
    var fileUpload = null;
    var download = null;
    var formData = null;
    file.addEventListener("change", function(e) {
        fileUpload = e.target.files[0];
        var reader = new FileReader();
        reader.readAsDataURL(fileUpload); // 转换二进制
        reader.onload = function({ target:{ result } }){

            console.log(result)

            // 图片转base64
            // download = new Blob([result], {type: fileUpload.type} )
            // formData = new FormData();
            // formData.append('file', download);
            // console.log(formData);
        }
    })
    
    function downloadFile(){
        // xhr请求
        if(!download) return alert('请先上传图片')
        var xhr = new XMLHttpRequest();
        xhr.open('POST', "https://www.baidu.com/", true);
        xhr.responseType = 'blob';
        xhr.onload = function () {
            if (this.status === 200) {
                var blob = this.response;
                var link = document.createElement('a');
                link.href = window.URL.createObjectURL(blob);
                link.download = fileUpload.name;
                link.click();
            }
        };
        xhr.send(formData);
    }
</script>